<template>
  <div class="content-wrapper">
    <!-- <div class="content-header"></div>
    <div class="title">
      <div>生效处理</div>
    </div>
    <el-divider></el-divider> -->
    <div class="content-container">
      <el-form ref="listQuery" :inline="true" class="filter-container">
        <el-form-item label="文件等级">
          <el-select
            v-model="listQuery.documentLevel"
            clearable
            size="mini"
            @change="handleLevelChange"
          >
            <el-option
              v-for="documentLevel in levels"
              :key="documentLevel.value"
              :label="documentLevel.label"
              :value="documentLevel.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="文件属性">
          <el-select v-model="listQuery.documentProperty" clearable size="mini">
            <el-option
              v-for="item in categories"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="文件编号" min-width="220">
          <el-input
            v-model.trim="listQuery.documentCode"
            type="text"
            size="mini"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            size="small"
            round
            type="primary"
            icon="el-icon-search"
            @click="getDataList"
          >
            搜索
          </el-button>
          <!-- <el-tooltip effect="dark" content="打印列表" placement="top">
            <el-button size="mini" round circle icon="el-icon-printer">
            </el-button>
          </el-tooltip> -->
        </el-form-item>
      </el-form>
      <div>
        <el-table
          v-loading="listLoading"
          height="500"
          :data="documentList"
          highlight-current-row
          :default-sort="{ prop: 'documentCode' }"
        >
          <el-table-column
            label="流程类型"
            prop="flowTypeName"
            width="120px"
            sortable
          />
          <el-table-column
            label="文件编号"
            prop="documentCode"
            min-width="220"
            sortable
          />
          <el-table-column
            label="文件名称"
            prop="documentName"
            min-width="200px"
            show-overflow-tooltip
          />
          <el-table-column
            label="文件等级"
            prop="documentLevel"
            :formatter="
              (row, column, cellValue, index) => {
                return flowOptions.find((item) => {
                  if (item.key == cellValue) {
                    return item
                  }
                }).value
              }
            "
          />
          <el-table-column
            label="文件属性"
            prop="documentProperty"
            :formatter="
              (row, column, cellValue, index) => {
                return flowOptions.find((item) => {
                  if (item.key == cellValue) {
                    return item
                  }
                }).value
              }
            "
          />
          <el-table-column label="生效时间" prop="effectDate" />
          <el-table-column label="生效状态" prop="status">
            <template slot-scope="{ row }">
              <el-tag v-if="row.effectFlag" size="mini" type="success"
                >放行</el-tag
              >
              <el-tag
                v-if="!row.effectFlag && row.status != 2"
                size="mini"
                type="info"
                >时间未到</el-tag
              >
              <el-tag
                v-if="!row.effectFlag && row.status == 2"
                size="mini"
                type="warning"
                >作废</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="签收情况" />
          <el-table-column
            label="操作"
            align="center"
            width="60px"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-dropdown trigger="click" class="filter-item">
                <el-button type="text"><i class="el-icon-more" /></el-button>
                <el-dropdown-menu slot="dropdown" class="user-dropdown">
                  <el-dropdown-item
                    @click.native.prevent="preview(scope.row, scope.$index)"
                    >查看</el-dropdown-item
                  >
                  <el-dropdown-item @click.native.prevent="delay(scope.row)"
                    >生效延期</el-dropdown-item
                  >
                  <el-dropdown-item
                    @click.native.prevent="remindSigner(scope.row)"
                    >提醒签收</el-dropdown-item
                  >
                  <!-- <el-dropdown-item @click.native.prevent="remindSigner(row)"
                    >发放修改</el-dropdown-item
                  > -->
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page-number.sync="listQuery.pageNumber"
          :page-size.sync="listQuery.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <el-dialog
      title="修改生效日期"
      :visible.sync="dialogVisible"
      class="mini my-time"
      @close="handleClose()"
    >
      <el-date-picker
        v-model="effectDate"
        value-format="yyyy-MM-dd"
        type="date"
        :picker-options="pickerOptions"
        placeholder="选择日期"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEffectDate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {
  getPhaseSmall,
  Termination,
  effectiveProcessing
} from '@/api/xd/documentFlow'
import { listDictTreeItem } from '@/api/base/dict'
import { updateEffectDate } from '@/api/xd/flow/flow_new'
import '@/styles/flow.scss'
import { getFlowOptions } from '@/views/flow/js/dictionary.js'

export default {
  components: { Pagination },
  data() {
    return {
      listQuery: {
        effectType: 1,
        pageIndex: 0,
        pageSize: 10
      },
      documentList: [],
      total: 0,
      listLoading: true,
      levels: [],
      categories: [],
      dialogVisible: false, // 延迟生效日期对话框
      saveData: null,
      effectDate: null,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      flowOptions: []
    }
  },
  async mounted() {
    this.flowOptions = Array.from(await getFlowOptions())
    this.getList()
  },
  methods: {
    // 保存修改日期数据
    saveEffectDate() {
      const data = {
        effectDate: this.effectDate,
        documentId: this.saveData.documentId,
        documentCode: this.saveData.documentCode
      }
      updateEffectDate(data).then((res) => {
        this.dialogVisible = false
        this.$message.success('操作成功')
        this.getList()
      })
    },
    // 延迟生效日期窗口关闭时调用
    handleClose() {
      this.saveData = null
    },
    delay(row) {
      this.dialogVisible = true
      this.saveData = row
    },
    async getList() {
      await this.loadLevelOptions()
      this.listLoading = true
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      await effectiveProcessing(this.listQuery)
        .then((res) => {
          this.documentList = res.data.rows || []
          this.total = res.data.total
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.pageNumber = 1
      this.getList()
    },
    preview(row, index) {
      console.log(row, 'shjshgsgsggs')
      this.$router.push({
        path: '/flow/file_information',
        query: {
          phase: getPhaseSmall(row.phase),
          row: JSON.stringify(row)
        }
      })
    },
    // 终止流程
    termination(row) {
      Termination({ documentFlowId: row.documentFlowId }).then((res) => {
        if (res.code) {
          this.$message.success('终止流程成功')
        }
      })
    },
    // 获取文件等级，属性
    loadLevelOptions() {
      listDictTreeItem({ dictGroupCode: 'document_category' }).then((res) => {
        this.levels = res.data
      })
    },
    handleLevelChange(val) {
      if (this.listQuery.documentProperty) {
        this.listQuery.documentProperty = ''
      }
      for (let i = 0, len = this.levels.length; i < len; i++) {
        if (this.levels[i].value === val) {
          this.categories = this.levels[i].children
          if (this.listQuery.type) {
            this.listQuery.type = ''
          }
        }
      }
    },
    // 搜索
    getDataList() {
      effectiveProcessing(this.listQuery).then((res) => {
        this.documentList = res.data.rows || []
        this.listLoading = false
      })
    },
    remindSigner() {}
  }
}
</script>

<style lang="scss" scoped>
.my-time {
  >>> .el-dialog__body {
    text-align: center;
  }
}
.my-dropdown {
  margin-left: 20px;
}
</style>

